<template>
  <div>
    <span class="tinyTitle">
      <div class="titleFlag"></div>
      {{ '发展前景详情' }}
    </span>
    <el-row class="search-container">
      <!-- <el-form ref="form" label-width="auto">
        <el-form-item label="统计时间：">
          <el-date-picker v-model="selectBetweenTime" size="small" type="monthrange" align="right" unlink-panels
            value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份"
            :picker-options="pickerOptions" @change="handleDateChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="区域名称：">
          <multipleRegoinSearch ref="regionRef" :limit-num="1" @onRegionChange="onRegionChange" />
        </el-form-item>
      </el-form> -->
    </el-row>
    <div class="chartMain">
      <div class="h100" ref="line_echartDom"></div>
      <div class="regionLineDesc">
        <div class="regionLineDescItem" v-if="regionLineDescAvg">
          <div class="descTitle">整体收入平均值约</div>
          <div class="descNum">
            <span class="rmb">￥</span>{{ regionLineDescAvg }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPromotionSalaryList } from '@/api/salary';
import multipleRegoinSearch from '@/views/position/components/multipleRegoinSearch.vue';
export default {
  name: 'averygeBarChart',
  components: {
    multipleRegoinSearch
  },
  data() {
    return {
      resData: [],
      chartData: {},
      selectBetweenTime: [],
      pickerMinDate: '',
      firstDayofLastMonth: '',
      pickerOptions: {
        disabledDate: (time) => {
          const nowTime = time.getTime();
          if (nowTime < 1672502400000 || nowTime > this.firstDayofLastMonth) {
            return true;
          }
          if (this.pickerMinDate) {
            const monthsDiff =
              Math.abs(nowTime - this.pickerMinDate) /
              (1000 * 60 * 60 * 24 * 30);
            // 如果相差的月份大于6个月，则禁用该日期
            return monthsDiff > 6 || nowTime < 1672502400000;
          }
        },
        onPick: (obj) => {
          this.pickerMinDate = new Date(obj.minDate).getTime();
        }
      },
      average: '',
      selectedRegionList: [],
      regionLineDescAvg: ''
    };
  },
  created() {
    // // 创建一个表示当前日期的 Date 对象
    // var currentDate = new Date();
    // // 将当前日期设置为本月的第一天
    // currentDate.setDate(1);
    // // 将当前日期减去一天，得到上个月最后一天
    // currentDate.setDate(0);
    // // 设置时间为零点
    // currentDate.setHours(0, 0, 0, 0);
    // // 获取时间戳
    // var timestamp = currentDate.getTime();
    // this.firstDayofLastMonth = timestamp;
  },
  mounted() {
    // let date = new Date(new Date() - 30 * 24 * 3600 * 1000);
    // let value =
    //   date.getFullYear() +
    //   "-" +
    //   (date.getMonth() < 10 ? "0" : "") +
    //   date.getMonth() +
    //   "-" +
    //   "01";

    // //默认显示当月日期
    // let date1 = new Date(new Date());
    // let value1 =
    //   date1.getFullYear() +
    //   "-" +
    //   (date1.getMonth() < 10 ? "0" : "") +
    //   date1.getMonth() +
    //   "-" +
    //   "01";
    // this.selectBetweenTime = [value, value1];
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      const params = {
        id: this.$route.query.id
      };
      // params.beginTime = "2023-1-1";
      // params.endTime = "2023-5-1";
      if (this.selectBetweenTime != null && this.selectBetweenTime != '') {
        params.beginTime = this.selectBetweenTime[0];
        params.endTime = this.selectBetweenTime[1];
        // params.beginTime = "2023-1-1";
        // params.endTime = "2023-5-1";
      }
      params.regionIds = this.selectedRegionList.join('_');
      getPromotionSalaryList(params).then((response) => {
        const data = response.data.rows;
        this.chartData = this.handleData(data);
        this.init();
      });
    },
    handleData(data) {
      console.log(data);
      const obj = {
        promotionLevelName: [],
        salary: []
      };
      data.forEach((item, index) => {
        obj.promotionLevelName.push(item.promotionLevelName);
        obj.salary.push(item.salaryNum);
      });
      return obj;
    },
    onRegionChange(val) {
      this.selectedRegionList = val;
      this.fetchData();
    },
    init() {
      if (!this.$refs['line_echartDom']) return;
      this.myChart = this.$echarts.init(this.$refs['line_echartDom']);
      let promotionLevelName = this.chartData.promotionLevelName,
        salary = this.chartData.salary;
      let option = {
        xAxis: {
          type: 'category',
          data: promotionLevelName,
          name: '(职位)',
          // boundaryGap: false,
          nameTextStyle: {
            lineHeight: 30, //标题行高
            verticalAlign: 'top', //标题位置
            color: '#8193B2'
          },

          axisLabel: {
            color: '#8193B2',
            fontSize: '13px'
          },
          axisLine: {
            lineStyle: {
              color: '#E4EDF8'
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#000000'
            }
          },
          backgroundColor: '#1B78FF',
          borderColor: '#1B78FF',
          textStyle: {
            color: '#fff'
          }
          // position: ["50%", 0],
        },
        grid: {
          left: salary.length ? '0%' : '4%',
          // right: "4%",
          // bottom: "3%",
          containLabel: true
        },
        yAxis: {
          type: 'value',
          // scale: true,
          name: '(薪酬 元)',
          axisLabel: {
            color: '#8193B2',
            fontSize: '12px'
          },
          nameTextStyle: {
            padding: [0, 55, 10, 0], // 上右下左与原位置距离
            color: '#8193B2'
          }
        },
        series: [
          {
            data: salary,
            type: 'bar',
            showBackground: false,
            barWidth: '18px',
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    //只要修改前四个参数就ok
                    offset: 0,
                    color: '#81B4FF'
                  }, //柱图渐变色
                  {
                    offset: 1,
                    color: '#A3DBFF'
                  }
                ]),
                borderRadius: [4, 4, 0, 0],
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#555',
                    fontSize: 16
                  }
                }
              }
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#0068FF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#4996FF' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            }
          }
        ]
      };

      option && this.myChart.setOption(option);
      window.addEventListener('resize', () => {
        if (this.myChart) {
          this.myChart.resize();
        }
      });
      // this.myChart.dispatchAction({
      //   type: "showTip",
      //   seriesIndex: 0,
      //   dataIndex: 1,
      // });
    },
    onWorkYearChange(val) {
      this.fetchData();
    },
    handleDateChange(val) {
      this.pickerMinDate = null;
      this.fetchData();
    }
  }
};
</script>

<style lang="scss" scoped>
.tinyTitle {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-top: 16px;
  color: #222;
  font-weight: bold;
  margin-bottom: 22px;
  .titleFlag {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: #4880ff;
    margin-right: 12px;
  }
}
.chartMain {
  display: flex;
  align-items: center;
}
.regionLineChart {
  display: flex;
  align-items: center;
}
.regionLineDesc {
  margin-left: 45px;
}
.descTitle {
  color: #555;
  font-size: 16px;
}
.descNum {
  display: flex;
  align-items: baseline;
  color: #1b78ff;
  font-size: 30px;
  margin-top: 22px;
  font-family: D-DIN-PRO-500-Medium;
}
.rmb {
  font-size: 22px;
}
.h100 {
  height: 20vw;
  width: 70%;
  min-width: 615px;
  min-height: 340px;
}
::v-deep .el-date-editor {
  background: #fafcfe;
  border-radius: 4px;
  border: 1px solid #e4edf8;
}
::v-deep .el-form-item:last-of-type {
  margin-bottom: 0px;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555555;
  line-height: 22px;
}
::v-deep .el-form-item {
  margin-bottom: 6px;
}
::v-deep .el-form-item__label-wrap {
  margin-left: 0px !important;
}
.search-container {
  display: flex;
  align-items: center;
}
</style>
